import { HeroService } from 'src/app/service/hero/hero.service';
import { Component, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { Hero } from '../hero/hero';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-hero-search',
  templateUrl: './hero-search.component.html',
  styleUrls: ['./hero-search.component.scss']
})
export class HeroSearchComponent implements OnInit {
  //$ 是一个命名惯例，用来表明 heroes$ 是一个 Observable，而不是数组。
  heroes$: Observable<Hero[]>;
  //Subject 既是可观察对象的数据源，本身也是 Observable。
  private serachTerms = new Subject<string>();
  constructor(private heroService: HeroService) {}

  ngOnInit() {
    this.heroes$ = this.serachTerms.pipe(
      //输入值后发起调用的时间间隔
      debounceTime(300),
      //确保只在过滤条件变化时才发送请求
      distinctUntilChanged(),
      //switchMap() 会记住原始的请求顺序，只会返回最近一次 HTTP 方法调用的结果。 以前的那些请求都会被取消和舍弃。
      switchMap(terms => this.heroService.searchHeroes(terms))
    );
  }
  search(terms: string) {
    // next(value) 方法往 Observable 中推送一些值
    this.serachTerms.next(terms);
  }
}
